<template>
	<view class="my">
		<!-- 用户信息 -->
		<view class="deom1">
			<view class="demo1white">
				<!-- 用户头像和昵称账号 -->
				<view class="above">
					<navigator><image class="head_portrait" src="../home/img/5.jpg"></image></navigator>
					<navigator class="aboveright">
						<view class="Nickname">Rahal</view>
						<view class="account_number">账号：GUY356895</view>
					</navigator>
				</view>
				
				<!-- 粉丝，关注，获赞 -->
				<view class="fans">
					<navigator>
						<view>2300</view>
						<view>粉丝</view>
					</navigator>
					<navigator>
						<view>300</view>
						<view>关注</view>
					</navigator>
					<navigator>
						<view>4500</view>
						<view>获赞</view>
					</navigator>
				</view>
			</view>
		</view>
		
		<!-- 中间部分 -->
		<view class="deom2">
			<!-- 我的足迹，我的喜欢，我的收藏，我的草稿 -->
			<view class="my_footprints">
				<navigator @click="my_footprints()">
					<image src="../home/img/5.jpg"></image>
					<view>我的足迹</view>
				</navigator>
				<navigator @click="my_footprints()">
					<image src="../home/img/5.jpg"></image>
					<view>我的喜欢</view>
				</navigator>
				<navigator @click="my_footprints()">
					<image src="../home/img/5.jpg"></image>
					<view>我的收藏</view>
				</navigator>
				<navigator @click="my_footprints()">
					<image src="../home/img/5.jpg"></image>
					<view>我的草稿</view>
				</navigator>
			</view>
			
			<!-- 收藏，喜欢 -->
			<view class="Collection">
				<view class="collliketop">
					<navigator>
						<view>收藏</view>
						<view>(46)</view>
					</navigator>
					<navigator>
						<view>喜欢</view>
						<view>(99)</view>
					</navigator>
				</view>
				
				<!-- 收藏和喜欢的作品 -->
				<view class="contentlike">
					<navigator>
						<image class="contentimgmax" src="../home/img/5.jpg"></image>
						
						<view class="contenttop">
							<view class="contenttop_left">
								<image src="../home/img/5.jpg"></image>
								<view>hh</view>
							</view>
							<view class="contenttop_rigth">
								<image src="../home/img/5.jpg"></image>
								<view>hh</view>
							</view>
						</view>
					</navigator>
					<navigator>
						<image class="contentimgmax" src="../home/img/5.jpg"></image>
						<view class="contenttop">
							<view class="contenttop_left">
								<image src="../home/img/5.jpg"></image>
								<view>hh</view>
							</view>
							<view class="contenttop_rigth">
								<image src="../home/img/5.jpg"></image>
								<view>hh</view>
							</view>
						</view>
					</navigator>
					<navigator>
						<image class="contentimgmax" src="../home/img/5.jpg"></image>
						<view class="contenttop">
							<view class="contenttop_left">
								<image src="../home/img/5.jpg"></image>
								<view>hh</view>
							</view>
							<view class="contenttop_rigth">
								<image src="../home/img/5.jpg"></image>
								<view>hh</view>
							</view>
						</view>
					</navigator>
					
				</view>
				
			</view>
		
		</view>
	
	</view>
</template>

<script>
	export default{
		name:"my",
		components:{},
		data(){
			return{
				
			}
		},
		methods:{
			//点击跳转详情
			my_footprints(){
				uni.navigateTo({
					url:'',
					success:()=>{
						
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 用户信息 */
	.deom1{
		width: 100%;
		height: 141px;
		background: linear-gradient(#558EE7,#89B7FF);
		
	}
	.demo1white{
		width: 94%;
		height: 146px;
		border-radius: 20px;
		background: #FFFFFF;
		position: absolute;
		top: 43px;
		left: 3%;
		
	}
	/* <!-- 用户头像和昵称账号 --> */
	.above{
		width: 100%;
		height: 67px;
	}
	
	.head_portrait{
		width: 58px;
		height: 58px;
		border-radius: 50%;
		margin: 9px 15px 0px 38px;
		float: left;
	}
	.aboveright{
		margin: 30px 0px 0px 0px;
		float:  left;
	}
	
	.Nickname{
		color: #252424;
		font-size: 19px;
	}
	
	.account_number{
		color: #7B7B7B;
		font-size: 12px;
	}
	
	/* <!-- 粉丝，关注，获赞 --> */
	.fans{
		width: 86%;
		display: flex;
		justify-content: space-evenly;
		margin: auto;
		margin-top: 16px;
		
	}
	.fans>navigator{
		position: relative;
		width: 33.3%;
		text-align: center;
		
	}
	.fans>navigator::after{
		content: '';
		width: 2px;
		height: 19px;
		background-color: #2B5DAC;
		position: absolute;
		right: 0%;
		top: 30%;
	}
	
	.fans>navigator:last-child::after{
		content: '';
		width: 0px;
		height: 0px;
	}
	.fans>navigator view:first-child{
		color: #3A3A3A;
		font-size: 15px;
	}
	.fans>navigator view:last-child{
		color: #7D7D7D;
		font-size: 12px;
	}
	
	
	
	
	
	
	
	/* 中间部分 */
	.deom2{
		width: 100%;
		background: #eeeeee;
		padding-top: 70px;
		padding-bottom: 30px;
	}
	/* <!-- 我的足迹，我的喜欢，我的收藏，我的草稿 --> */
	.my_footprints{
		width: 95%;
		height: 71px;
		background: #FFFFFF;
		margin:auto;
		border-radius: 5px;
		display: flex;
		justify-content: space-evenly;
		align-items: center
		
	}
	.my_footprints>navigator{
		width: 33.3%;
		text-align: center;
	}
	.my_footprints image{
		width: 26px;
		height: 31px;
	}
	.my_footprints>navigator view{
		font-size:12px;
		color: #ACACAC;
	}
	
	/* <!-- 收藏，喜欢 --> */
	.Collection{
		width: 95%;
		margin:auto;
		background: #f8f8f8;
		border-radius: 5px;
		margin-top: 13px;
	}
	
	.collliketop{
		width: 100%;
		height: 57px;
		background: #FFFFFF;
		border-radius: 5px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
	}
	.collliketop>navigator{
		width: 50%;
		text-align: center;
		
	}
	.collliketop>navigator:first-child::after{
		content: "";
		width: 38px;
		height: 5px;
		background-color: #639AEE;
		border-radius: 2px;
		position: absolute;
		bottom: 0%;
		left: 19%;
	}
	.collliketop>navigator view{
		display: inline-block;
		font-size: 15px;
	}
	.collliketop>navigator view:first-child{
		color: #211f1f;
		margin-right: 10px;
		
	}
	.collliketop>navigator view:last-child{
		color: #7A7A7A;
	}
	
	/* 收藏和喜欢的作品 */
	.contentlike{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 12px;
	}
	.contentlike>navigator{
		width: 45%;
		margin: 8px;
		
	}
	.contentlike .contentimgmax{
		width: 100%;
		height: 145px;
		border-radius: 5%;
	}
	.contenttop{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.contenttop_left image{
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-right: 6px;
		
	}
	.contenttop_left,.contenttop_rigth{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.contenttop_rigth image{
		width: 12px;
		height: 12px;
		margin-right: 6px;
	}
</style>
